{extend name="common/base" /}
{block name="body"} 
<div class="Content" id="content">
    <div class="container">
        <div class="FormPage StoreInfo">
            <form class="layui-form" lay-filter="storeForm">
                <div class="form-item-inline">
                    <label class="form-label">店铺头像：</label>
                    <div class="input-inline" style="display: flex;flex-direction: column;">
                        <button type="button" class="layui-btn" id="ID-upload-demo-btn">
                            <i class="layui-icon layui-icon-upload"></i> 单图片上传
                          </button>
                          <div style="width: 132px;">
                            <div class="layui-upload-list">
                              <img class="layui-upload-img" id="ID-upload-demo-img" src="{$merchant.shop_thumb}" style="width: 100%; height: 92px;">
                              <div id="ID-upload-demo-text"></div>
                            </div>
                            <div class="layui-progress layui-progress-big" lay-showPercent="yes" lay-filter="filter-demo">
                              <div class="layui-progress-bar" lay-percent=""></div>
                            </div>
                          </div>
                          <input type="hidden" name="shop_thumb" id="shop_thumb" value="">
                    </div>
                </div>
                <div class="form-item-inline">
                    <label class="must form-label">店铺名称：</label>

                    <div class="input-inline">
                        <input type="text" name="shop_name" placeholder="" lay-verify="required|maxlength"
                            lay-reqtext="" maxLength="50" class="layui-input" value="{$merchant.shop_name}">

                    </div>
                </div>

                <div class="form-item-inline" style="align-items: flex-start;">
                    <label class=" form-label">店铺简介：</label>
                    <div class="block">
                        <textarea name="shop_info" placeholder="" lay-verify="maxlength" maxlength="500"
                            class="layui-textarea">{$merchant.shop_info}</textarea>

                    </div>

                </div>
                <div class="form-item-inline">
                    <label class="must form-label">电话：</label>

                    <div class="block">
                        <input type="text" name="phone" placeholder=""  lay-verify="required|maxlength"
                            lay-reqtext="" maxLength="50" class="layui-input" value="{$merchant.phone}">

                    </div>
                </div>
                <div class="form-item-inline">
                    <label class="must form-label">邮箱：</label>

                    <div class="input-inline">
                        <input type="text" name="email" placeholder="" lay-verify="required|maxlength"
                            lay-reqtext="" maxLength="50" class="layui-input" value="{$merchant.email}">

                    </div>
                </div>
                <div class="form-item-inline ">
                    <label class=" form-label"></label>
                    <div class="input-inline foot">
                        <button class="layui-btn" lay-submit lay-filter="submitForm">保存设置</button>
                    </div>
                </div>
            </form>
            
        </div>
    </div>
</div>
{/block}

{block name="js"} 
<script>
    changeTitleName('店铺信息');
    
    layui.use(['form', 'upload', 'layer','element'], function(){
        var form = layui.form;
        var upload = layui.upload;
        var layer = layui.layer;
        var $ = layui.$;
        var element = layui.element;
        
        // 头像上传
        var uploadInst = upload.render({
            elem: '#ID-upload-demo-btn',
            url: '/merchant/upload_img', // 实际使用时改成您自己的上传接口即可。
            before: function(obj){
                // 预读本地文件示例，不支持ie8
                obj.preview(function(index, file, result){
                    $('#ID-upload-demo-img').attr('src', result); // 图片链接（base64）
                });
                
                element.progress('filter-demo', '0%'); // 进度条复位
                layer.msg('上传中', {icon: 16, time: 0});
            },
            done: function(res){
                // 若上传失败
                if(res.code !=200){
                    return layer.msg('上传失败');
                }
                // 上传成功
                $('#ID-upload-demo-img').attr('src', res.data.src);
                $('#ID-upload-demo-text').html(''); // 置空上传失败的状态
                $('#shop_thumb').val(res.data.src); // 将图片地址存入隐藏域
            },
            error: function(){
            // 请求异常回调
            },
            // 进度条
            progress: function(n, elem, e){
            element.progress('filter-demo', n + '%'); // 可配合 layui 进度条元素使用
            if(n == 100){
                layer.msg('上传完毕', {icon: 1});
            }
            }
        });
        form.on('submit(submitForm)', function(data){
            var loading = layer.load(2);
            
            $.ajax({
                url: '/merchant/save_store_info',
                type: 'POST',
                dataType: 'json',
                data: data.field,
                success: function(res){
                    layer.close(loading);
                    if(res.code == 200){
                        layer.msg('保存成功', {icon: 1});
                    }else{
                        layer.msg(res.msg || '保存失败', {icon: 2});
                    }
                },
                error: function(){
                    layer.close(loading);
                    layer.msg('网络错误，请稍后再试', {icon: 2});
                }
            });
            
            return false; // 阻止表单自动提交
        });
        
        // 表单验证
        form.verify({
            phone: [/^1[3-9]\d{9}$|^(0\d{2,3}-?)?\d{7,8}$/, '请输入正确的电话号码'],
            email: [/^[a-z0-9._%-]+@([a-z0-9-]+\.)+[a-z]{2,4}$|^1[3-9]\d{9}$/i, '请输入正确的邮箱'],
            avatar: function(value){
                if(!value){
                    return '请上传店铺头像';
                }
            }
        });
        

    });
</script>
{/block}